<script setup>
import {ref} from "vue";
import {getGoodsList, goodsManage, delGoods} from "@/api/product";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import Pagination from "@/components/Pagination/index.vue";
import {useRouter} from "vue-router";
import {dataFind, moneyFormat} from "@zzcpt/zztool";

const searchForm = ref({
  search: "",
});
const categoryList = ref([]);
const getListParams = ref({
  per_page: 10,
  cur_page: 1,
});
const loading = ref(false);
const tableData = ref([]);
const router = useRouter();

getList();

async function getList(param = {}) {
  if (categoryList.value.length === 0) {
    await getCategoryListFn();
  }
  loading.value = true;
  const res = await getGoodsList(Object.assign(getListParams.value, param)).finally(() => {
    loading.value = false;
  });
  
  if (res.data.goods.length > 0) {
    res.data.goods.map(item => {
      item.goods_category_name = dataFind(categoryList.value, 'category_id', item.goods_category).name ?? '';
      item.goods_price_per_sku = moneyFormat(item.goods_price_per_sku, ',', '￥');
      return item;
    });
  }
  tableData.value = res.data;
}

function searchList() {
  getList(searchForm.value);
}

function changePagination(e) {
  getList({cur_page: e.page});
}

function editProduct(row) {
  router.push(`/product/add/type=${row.id}`);
}

async function getCategoryListFn() {
  // 用的是获取商品分类页面的接口
  const res = await goodsManage();
  // 将JSON转为数组
  const dataArray = []
  for (let key in res.data) {
    dataArray.push(res.data[key])
  }
  categoryList.value = dataArray;
}

async function remove(row) {
  const res = await delGoods({goods_id: row.id.toString()});
  if (res.code == 200) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getList();
  }
}
</script>

<template>
  <div class="container">
    <p class="title">商品列表</p>
    <div class="box mb-2">
      <div class="search mb-2 flex">
        <div class="flex flex-a-c flex-j-c">
          <span class="label">商品名称：</span>
          <el-input
            v-model="searchForm.search"
            placeholder="请输入内容"
            class="search-input"
            clearable
            @keyup.enter="searchList()"
          >
          </el-input>
        </div>
        <div class="ml-1">
          <el-button type="primary" @click="searchList()">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="tool mb-1">
        <el-button
          :icon="Plus"
          type="primary"
          @click="router.push('/product/add/type=add')"
        >添加商品
        </el-button
        >
      </div>
      <div class="table">
        <el-table
          v-loading="loading"
          :data="tableData.goods"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'child' }"
        >
          <el-table-column prop="id" label="商品ID" width="80"/>
          <el-table-column prop="goods_name" label="商品名称"/>
          <el-table-column prop="goods_category_name" label="商品分类" width="120"/>
          <el-table-column prop="goods_price_per_sku" label="价格" width="150"/>
          <el-table-column prop="update_time" label="更新时间" width="150"/>
          <el-table-column prop="create_time" label="创建时间" width="150"/>
          <el-table-column label="操作" fixed="right" width="180">
            <template v-slot="scope">
              <div>
                <el-button text type="primary" @click="editProduct(scope.row)"
                >编辑
                </el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  title="确定删除吗？"
                  @confirm="remove(scope.row)"
                >
                  <template #reference>
                    <el-button text type="warning">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          @pagination="changePagination"
          :total="tableData.amount"
          :page="tableData.current_page"
        />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.search {
  .label {
    white-space: nowrap;
    width: 100px;
  }
}
</style>
